<template>
  <div style="margin-top: 50px">
    <el-form
      :model="value"
      :rules="rules"
      ref="productInfoForm"
      label-width="120px"
      style="width: 600px"
      size="small"
    >
      <el-form-item label="商品分类：" prop="productCategoryId">
        <el-cascader
          v-model="selectProductCateValue"
          :options="productCateOptions"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="商品名称：" prop="name">
        <el-input v-model="value.name"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌：" prop="brandId">
        <el-select
          v-model="value.brandId"
          @change="handleBrandChange"
          placeholder="请选择品牌"
        >
          <el-option
            v-for="item in brandOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍：">
        <el-input
          :autoSize="true"
          v-model="value.description"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品售价：">
        <el-input v-model="value.price"></el-input>
      </el-form-item>
      <div v-if="isEdit">
        <el-form-item label="商品封面：" prop="logo">
          <single-upload
            @getImgId="getImgId"
            v-model="value.logo"
            :isUpLoadLogo="false"
          ></single-upload>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="商品封面：" prop="logo">
          <single-upload
            @getImgId="getImgId"
            v-model="value.logo"
          ></single-upload>
        </el-form-item>
      </div>

      <el-form-item style="text-align: center">
        <el-button
          type="primary"
          size="medium"
          @click="handleNext('productInfoForm')"
          >下一步，填写商品属性</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { BrandGet } from "../../../../api/brand";
import { getShopType } from "../../../../api/productAttrCate";
import SingleUpload from "@/components/Upload/singleUpload";
import { getCommodityById } from "../../../../api/product";
export default {
  name: "ProductInfoDetail",
  components: { SingleUpload },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hasEditCreated: false,
      //选中商品分类的值
      selectProductCateValue: [],
      productCateOptions: [],
      brandOptions: [],
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
        productCategoryId: [
          { required: true, message: "请选择商品分类", trigger: "blur" },
        ],
        brandId: [
          { required: true, message: "请选择商品品牌", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入商品介绍", trigger: "blur" },
        ],
        requiredProp: [
          { required: true, message: "该项为必填项", trigger: "blur" },
        ],
        logo: [{ required: true, message: "请添加商品封面", trigger: "blur" }],
      },
    };
  },
  created() {
    if (this.isEdit) {
      if (this.$route.query.id) {
        getCommodityById(this.$route.query.id)
          .then(({ data }) => {
            var res = data.data;
            console.log(res);
            var line = res.imgPaht.indexOf("files") + 6;
            this.value.name = res.commodityName;
            this.value.description = res.productDetails;
            this.value.price = res.commodityCurrentPrice;
            this.value.logo =
              "http://localhost:5000/" + res.imgPaht.slice(line);
            this.$emit("setIsUpLoadLogo");
            this.$emit("getFilterProductAttrList", res.specifications);
            this.$emit("getSelectProductPics", res.detailsChart);
            this.$emit("setImgId", res.imgId);

            this.value.brandId = res.brand.id;
            this.selectProductCateValue = [res.shoptypeName.id];
            
          })
          .catch();
      }
    } else {
      this.value.name = "";
      this.value.description = "";
      this.value.price = "";
      this.value.logo = "";
    }

    this.getProductCateList();
    this.getBrandList();
  },
  computed: {
    //商品的编号
    productId() {
      return this.value.id;
    },
  },
  watch: {
    productId: function(newValue) {
      console.log(newValue);
      //   if(!this.isEdit)return;
      //   if(this.hasEditCreated)return;
      //   if(newValue===undefined||newValue==null||newValue===0)return;
      //   this.handleEditCreated();
    },
    selectProductCateValue: function(newValue) {
      console.log(newValue);
      if (newValue != null && newValue.length > 0) {
        this.value.productCategoryId = newValue[0];
      } else {
        this.value.productCategoryId = null;
        this.value.productCategoryName = null;
      }
    },
  },
  methods: {
    getImgId(val) {
      console.log(val);
      this.ImgId = val;
      this.$emit("setImgId", val);
    },
    //处理编辑逻辑
    handleEditCreated() {
      //   if(this.value.productCategoryId!=null){
      //     this.selectProductCateValue.push(this.value.cateParentId);
      //     this.selectProductCateValue.push(this.value.productCategoryId);
      //   }
      //   this.hasEditCreated=true;
    },
    getProductCateList() {
      getShopType().then(({ data }) => {
        var res = data.data;
        res.forEach((e) => {
          var list = {
            label: e.shopTypeName,
            value: e.id,
          };
          console.log(list);
          this.productCateOptions.push(list);
        });
      });
    },
    getBrandList() {
      BrandGet().then(({ data }) => {
        var res = data.data;
        res.forEach((e) => {
          var list = {
            label: e.brandName,
            value: e.id,
          };
          this.brandOptions.push(list);
        });
      });
    },
    getCateNameById(id) {
      console.log(id);
    },
    handleNext(formName) {
      console.log(formName);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("nextStep");
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000,
          });
          return false;
        }
      });
    },
    handleBrandChange(val) {
      console.log(val);
      console.log(this.brandOptions);
    },
  },
};
</script>

<style scoped></style>
